<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;

            overflow: auto;

            background-color: aquamarine;
            background-image: url(../img/01.jpg);
            background-repeat: repeat;
            background-position: right;
            padding: 10px;

            /* 
                设置背景的范围
                    background-clip
                        可选：
                            border-box 默认值 背景会出现在边框的下边
                            padding-box背景不会出现在边框，只会出现在内容区和内边距
                            content-box背景只会出现在内容区
                    background-origin 背景图片的偏移量计算的原点
                        可选:
                            padding-box 默认值 background-position从内边距处开始计算
                            content-box 背景图片从内容区开始计算
                            border-box 背景图片的变量从边框处开始计算
            */
            /* background-clip: border-box; */
            /* background-origin: padding-box; */

            /* 
                background-size设置背景大小
                设置两个值 第一个代表宽度  第二个代表高度
                设置一个值 第一个代表宽度 第二个值默认为auto
                cover 图片比例不变  将元素铺满
                contain  比例不变  图片完整显示
            */
            background-size: contain;

        }

        .box2{
            height: 1000px;
            background-image: url(../img/1.png);
            background-size: 100px 100px;
            background-repeat: no-repeat;
            /* 
                background-attachment
                -背景元素是否跟随元素移动
                -可选值：
                    scroll 默认值 滚动
                    fixed 固定

            */
            background-attachment: fixed;
        }


        /* 
            设置背景的值可以一起设置  
            size需要写在position后面用/隔开
            clip和origin的值 先写的是origin后写的是clip
            其它没有顺序要求
        */
        .box3{
            width: 500px;
            height: 500px;
            background: url(../img/1.png) #bfa center/contain no-repeat ;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

    <div class="box3">

    </div>
</body>
</html>